<template>
  <div
    class="comp-visual-recommendation"
    :class="[
      { hide: !isVRPanelShow() || isVisitor },
      isWithTab ? 'with-tab' : 'no-tab',
    ]"
  >
    <!-- <div class="vr-header"
     :class="{
       normal: isNormal
     }">
      <div class="text-box">
        <h4 class="hi">你好， {{useName}}
        <span
          class="btn-close"
          @click="closeVrPanel">
          <a-icon title="关闭" type="close" />
        </span>
      </h4>
      <p class="desc">{{ noSelectNode ? '请选择需要关联的表格数据' : '帮你推荐如下建议：'}}</p>
      </div>
      <canvas id="ani-vr" class="canvas"></canvas>
    </div> -->
    <div class="vr-header">
      <div
        v-if="intelliRecommendationType === 'DataFiltering'"
        class="vr-header-text"
      >
        数据清洗
      </div>
      <div
        v-else-if="intelliRecommendationType === 'DataStatistics'"
        class="vr-header-text"
      >
        数理统计
      </div>
      <div
        v-else-if="intelliRecommendationType === 'VisualRecommendation'"
        class="vr-header-text"
      >
        可视化推荐
      </div>
      <canvas
        id="ani-vr"
        class="canvas"
        style="height: 61px; width: 460px;"
      ></canvas>
      <div class="close-btn" @click="closeVrPanel()">
        <a-icon-font type="iconicon-beifen1-copy" />
      </div>
    </div>
    <div class="vr-content">
      <div class="vr-content-tabs">
        <div v-if="intelliRecommendationType === 'DataFiltering'">
          <!-- 数据清洗 -->
          <!-- 编辑历史计数 -->
          <editPanel
            v-if="isOptionEditShow"
            :history="currentHistory"
            :table-name="tableName"
          ></editPanel>
          <template v-else>
            <template v-if="!noSelectNode && selectColumns.length > 0">
              <template v-if="selectionType === selectTypeMap.rows">
                <RowOpFilter v-if="hasNullRows" @actiondone="doAction">
                </RowOpFilter>
                <RowOpCommon @actiondone="doAction"></RowOpCommon>
              </template>
              <template v-else-if="selectionType === selectTypeMap.columns">
                <template v-if="fromFormulaMenu">
                  <ColumnFormula
                    :formula-value="selectedColumnName"
                    @actiondone="doAction"
                  ></ColumnFormula>
                </template>
                <template v-else>
                  <ColumnOpCommon @actiondone="doAction"></ColumnOpCommon>
                  <ColumnFormula
                    :formula-value="selectedColumnName"
                    @actiondone="doAction"
                  ></ColumnFormula>
                  <ColumnOpFilter
                    v-if="tableSelectColumns && tableSelectColumns.length === 1"
                    :column-has-null-cell="columnHasNullCell"
                    :max-min-options="columnMaxMinOptions"
                    @actiondone="doAction"
                  ></ColumnOpFilter>
                  <ColumnMerge
                    v-if="tableSelectColumns && tableSelectColumns.length > 1"
                    @actiondone="doAction"
                  ></ColumnMerge>
                  <!-- 对象全解析 -->
                  <ColumnJsonParse
                    v-if="
                      tableSelectColumns &&
                      tableSelectColumns.length === 1 &&
                      tableSelectColumns[0].desc === 'json'
                    "
                    :table-name="tableName"
                    @actiondone="doAction"
                  ></ColumnJsonParse>
                  <ColumnArrayParse
                    v-if="
                      tableSelectColumns &&
                      tableSelectColumns.length === 1 &&
                      tableSelectColumns[0].desc === 'array'
                    "
                    :table-name="tableName"
                    @actiondone="doAction"
                  ></ColumnArrayParse>
                  <!-- 嵌合推荐 -->
                  <ChimeraJsonRecommend
                    v-if="tableSelectColumns && tableSelectColumns.length > 1"
                    @actiondone="doAction"
                  ></ChimeraJsonRecommend>
                  <ChimeraArrayRecommend
                    v-if="tableSelectColumns && tableSelectColumns.length > 1"
                    @actiondone="doAction"
                  ></ChimeraArrayRecommend>
                </template>
              </template>
              <template v-else-if="selectionType === selectTypeMap.cells">
                <CellOpFilter
                  :column-has-null-cell="columnHasNullCell"
                  :max-min-options="maxMinOptions"
                  :max-min-options-select="maxMinOptionsSelect"
                  :is-number-cell="isNumberCell"
                  @actiondone="doAction"
                ></CellOpFilter>
                <CellOpReset @actiondone="doAction"></CellOpReset>
                <CellOpCommon @actiondone="doAction"></CellOpCommon>
              </template>
              <template v-else-if="selectionType === selectTypeMap.bar">
                <BarReset
                  v-if="recommendValues"
                  :recommend-values="recommendValues"
                  @actiondone="doAction"
                ></BarReset>
              </template>
              <template v-else-if="selectionType === selectTypeMap.selection">
                <SelectionOpFilter @actiondone="doAction"></SelectionOpFilter>
                <SelectionOpReplace @actiondone="doAction"></SelectionOpReplace>
                <SelectionOpReset @actiondone="doAction"></SelectionOpReset>
                <SelectionJsonParse @actiondone="doAction"></SelectionJsonParse>
                <SelectionArrayParse
                  @actiondone="doAction"
                ></SelectionArrayParse>
              </template>
            </template>

            <!-- 无相关推荐 -->
            <div v-else class="no-vr">
              <div>
                <img
                  src="~@/assets/view/empty3.png"
                  alt="暂无推荐"
                  style="margin-bottom: 15px; margin-top: 200px;"
                />
                <p class="desc">
                  暂无推荐操作
                  <br />
                  请先选择一列数据
                </p>
              </div>
            </div>
          </template>
        </div>
        <div v-if="intelliRecommendationType === 'DataStatistics'">
          <MathematicalStatistics />
        </div>
        <div v-if="intelliRecommendationType === 'VisualRecommendation'">
          <!-- 可视化推荐 -->
          <VisualizationRecommendCard />
        </div>
      </div>
    </div>

    <div
      v-if="yPos > 0"
      ref="previewbox"
      class="preview-box"
      :style="{
        top: `${yPos}px`,
        right: xPos,
        transform: `translateY(${viewPortOffsetY}px)`,
      }"
      @mouseenter="onMouseEnter"
      @mouseleave="onMouseLeave"
    >
      <DataPreview @previewdatachange="onPreviewdatachange"></DataPreview>
      <!-- 带投影的右方向箭头 -->
      <svg
        class="after"
        :style="{
          transform: `translateY(${viewPortOffsetY * -1 - 8}px)`,
        }"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
      >
        <defs>
          <filter id="filtershadow" x="0" y="0">
            <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="1" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
          </filter>
        </defs>
        <path
          d="M0 0 L0 16 L10 8 L0 0 Z"
          stroke="transparent"
          fill="#FFF"
          filter="url(#filtershadow)"
        ></path>
        <path
          d="M1 0 L10 8 L1 16 "
          stroke="rgba(0,0,0, 0.04)"
          fill="transparent"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script lang="ts">
import { isNull } from 'lodash'
import { initWave } from '@/util/wave'
import { tcolumnQueryMinMax } from '@/api/visualization'
import { apiGetRecommendValue } from '@/api/data-clean'
import UserStore from '@/store/modules/user'
import DataStore, {
  CellInfo,
  IColumn,
  OptionPreViewAction,
  SelectionInfo,
} from '@/store/modules/dataview'
// import DataViewStore from '@/store/modules/dataview'
import SelectionType from '@/util/selection-type'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import VisualizationRecommendCard from '@/components/studio/data/node-edit-panel/VisualizationRecommendCard.vue'
import MathematicalStatistics from '@/components/studio/data/node-edit-panel/MathematicalStatistics.vue'
import RowOpCommon from './vr-operations/rows/common.vue'
import RowOpFilter from './vr-operations/rows/filter.vue'
import ColumnOpCommon from './vr-operations/columns/common.vue'
import ColumnFormula from './vr-operations/columns/formula.vue'
import ColumnOpFilter from './vr-operations/columns/filter.vue'
import ColumnMerge from './vr-operations/columns/merge.vue'
import CellOpCommon from './vr-operations/cells/common.vue'
import CellOpFilter from './vr-operations/cells/filter.vue'
import CellOpReset from './vr-operations/cells/reset.vue'
import SelectionOpFilter from './vr-operations/selection/filter.vue'
import SelectionOpReplace from './vr-operations/selection/replace.vue'
import SelectionOpReset from './vr-operations/selection/reset.vue'
import DataPreview from './vr-operations/common/dataPreview.vue'
import editPanel from './vr-operations/edit/editPanel.vue'
import SplitInfo from './vr-operations/common/split-info-interface'
import BarReset from './vr-operations/bars/reset.vue'
import SelectionJsonParse from './vr-operations/selection/SelectionJsonParse.vue'
import SelectionArrayParse from './vr-operations/selection/SelectionArrayParse.vue'
import ChimeraJsonRecommend from './vr-operations/columns/ChimeraJsonRecommend.vue'
import ChimeraArrayRecommend from './vr-operations/columns/ChimeraArrayRecommend.vue'
import ColumnJsonParse from './vr-operations/columns/ColumnJsonParse.vue'
import ColumnArrayParse from './vr-operations/columns/ColumnArrayParse.vue'

@Component({
  components: {
    RowOpCommon,
    RowOpFilter,
    ColumnOpCommon,
    ColumnFormula,
    ColumnOpFilter,
    ColumnMerge,
    CellOpCommon,
    CellOpReset,
    CellOpFilter,
    SelectionOpFilter,
    SelectionOpReplace,
    SelectionOpReset,
    DataPreview,
    VisualizationRecommendCard,
    editPanel,
    BarReset,
    MathematicalStatistics,
    SelectionJsonParse,
    SelectionArrayParse,
    ChimeraJsonRecommend,
    ChimeraArrayRecommend,
    ColumnJsonParse,
    ColumnArrayParse,
  },
})
export default class VisualRecommendation extends Vue {
  // 控制显示高度
  @Prop({ type: Boolean, default: false })
  isWithTab!: boolean

  // 智能推荐模式
  public get intelliRecommendationType() {
    return DataStore.intelliRecommendationType
  }

  /**
   * 表格操作选中模式
   */
  public selectTypeMap: object = {
    columns: `${SelectionType.columns}`,
    rows: `${SelectionType.rows}`,
    cells: `${SelectionType.cells}`,
    selection: `${SelectionType.selection}`,
    bar: `${SelectionType.bar}`,
    bars: `${SelectionType.bars}`,
    none: '',
  }

  public get openVRPanelPara() {
    return DataStore.OpenVRPanelPara
  }

  @Watch('openVRPanelPara', { deep: true })
  public onOpenVRPanelParaChange(newValue: any) {
    if (newValue.semantic) {
      this.openVRPanel(this.openVRPanelPara)
    }
  }

  isNormal: boolean = false
  selectedColumnName: any = ''

  async created() {
    if (!UserStore.currentUser) {
      await UserStore.queryUserInfo()
    }
  }

  openVRPanel(data: any) {
    DataStore.setTableSelectiontype(SelectionType.bar)
    apiGetRecommendValue({
      data: {
        ...data,
      },
    }).then((response) => {
      if (response.data.code === 100) {
        const recommendValues = response.data.result.values
        this.recommendValues = recommendValues
      }
    })
  }

  isVRPanelShow() {
    // this.isNormal = DataStore.isVRPanelShow
    return this.selectNode ? +this.selectNode.type !== 6 : true
  }

  public get fromFormulaMenu() {
    return DataStore.onlyShowFormulaCard
  }

  @Watch('fromFormulaMenu', { deep: true })
  public onFromFormulaMenu(newValue: any) {
    if (newValue) {
      this.tabKey = 'clean'
    }
  }

  private get isVisitor() {
    if (DataStore.isVisitor) {
      DataStore.setVRPanelShow(false)
    }
    return DataStore.isVisitor
  }

  get hasNullRows() {
    return DataStore.tableHasNullRows
  }

  get columnHasNullCell() {
    return DataStore.columnHasNullCell
  }

  get isNumberCell() {
    if (DataStore.tableSelectCells[0]) {
      return (
        DataStore.tableColumns.findIndex((item) => {
          return (
            item.name === DataStore.tableSelectCells[0].columnName &&
            item.desc &&
            ['decimal', 'int'].includes(item.desc)
          )
        }) >= 0
      )
    }
    return false
  }

  get tableSelectCell() {
    return DataStore.tableSelectCells
  }

  get selectionType() {
    return DataStore.tableSelectionType
  }

  get dataStore() {
    return DataStore
  }

  get noSelectNode() {
    return DataStore.selectNode === null
  }

  xPos: string = ''

  get yPos() {
    this.xPos = this.$el
      ? `${(this.$el as HTMLElement).offsetWidth + 26}px`
      : '-10000px'
    return DataStore.hoverYPos
  }

  get useName() {
    return UserStore.currentUser ? UserStore.currentUser.name : '未命名用户'
  }

  private get currentHistory() {
    return DataStore.currentHistory
  }

  private get isEditHistory() {
    return DataStore.isEditHistory
  }

  private get historyList() {
    return DataStore.historyList
  }

  private get selectNode() {
    return DataStore.selectNode
  }

  private get tableName(): string {
    if (!this.selectNode) {
      return ''
    }
    const { output = [] } = this.selectNode.data || {}
    // 查询数据的表名取决于当前历史记录的表名，没有的话取selectnode的表名
    return this.currentHistory
      ? this.currentHistory.data.table
      : output[0]
      ? output[0].tableName
      : ''
  }

  private get tableSelectCells() {
    return DataStore.tableSelectCells
  }

  private get tableSelectColumns() {
    return DataStore.tableSelectColumns
  }

  /**
   * 历史记录编辑标记
   */
  private get vrEditTrigger() {
    return DataStore.vrEditTrigger
  }

  @Watch('isOptionEditShow')
  handleEditShow(newValue: boolean) {
    if (!newValue) {
      DataStore.setEditedFormulaColName('')
    }
  }

  /**
   * 编辑面板是否展示
   */
  get isOptionEditShow() {
    return this.vrEditTrigger !== -1 && DataStore.currentHistory !== null
  }

  /**
   * 列中最小值与最大值
   */
  private maxMinOptions: [number | null, number | null] = [null, null]

  /**
   * 单列模式下列中最小值与最大值
   */
  private columnMaxMinOptions: [number | null, number | null] = [null, null]

  /**
   * 列中已选中模式下最大值与最小值
   */
  private maxMinOptionsSelect: [number | null, number | null] = [null, null]

  private tabKey: string = 'clean'

  /**
   * 地图数据 所推荐的清洗数据
   */
  private recommendValues: Array<string> = []

  @Watch('tableSelectCell', {
    immediate: true,
    deep: true,
  })
  getTableSelectCell(newValue: Array<CellInfo> | null) {
    if (newValue !== null && this.isNumberCell) {
      const values = newValue.reduce((rec: Array<number>, item) => {
        if (item.columnName !== null) {
          const cellNumber = Number.parseFloat(item.cellValue)
          if (!Number.isNaN(cellNumber)) {
            rec.push(cellNumber)
          }
        }
        return rec
      }, [])
      this.maxMinOptionsSelect = [Math.min(...values), Math.max(...values)]
      if (this.maxMinOptionsSelect[0] === this.maxMinOptionsSelect[1]) {
        this.maxMinOptionsSelect[1] =
          (this.maxMinOptionsSelect[1] as number) + 1
      }
    } else {
      this.maxMinOptionsSelect = this.maxMinOptions
    }
  }

  @Watch('tableSelectColumns', {
    immediate: true,
    deep: true,
  })
  getTableSelectColumns(newValue: Array<IColumn> | null) {
    if (newValue && newValue.length === 1) {
      this.getColumnMinMaxInfo(newValue[0])
    } else {
      this.columnMaxMinOptions = [null, null]
    }
    //  perpare for formula
    if (newValue && newValue.length >= 1) {
      this.selectedColumnName = this.transformColumnNameToIndex()
    }
  }

  //  选择到的列进行index 转换 -> $c1 ....
  transformColumnNameToIndex() {
    const index = DataStore.tableColumns.findIndex((item) => {
      return item.name === DataStore.tableSelectColumns[0].name
    })
    return `$c${index + 1}`
  }

  /**
   * 根据列信息获取列的最大最小值
   */
  getColumnMinMaxInfo(column: IColumn) {
    this.columnMaxMinOptions = [null, null]
    tcolumnQueryMinMax({
      data: {
        name: column.name,
        table: this.tableName,
      },
    }).then((response) => {
      if (response.data.code === 100) {
        const data = response.data.result as any
        // 如果是日期、数值则求最大最小值
        this.columnMaxMinOptions = [data.min, data.max]
      }
    })
  }

  /**
   * 选中单元格后
   */
  getMinMaxInfo(cell: CellInfo) {
    this.maxMinOptions = [null, null]
    tcolumnQueryMinMax({
      data: {
        name: cell.columnName,
        table: this.tableName,
      },
    }).then((response) => {
      if (response.data.code === 100) {
        const data = response.data.result as any
        // 如果是日期、数值则求最大最小值
        this.maxMinOptions = [data.min, data.max]
      }
    })
  }

  @Watch('tableSelectCells', {
    immediate: true,
    deep: true,
  })
  getTableSelectCells(newValue: Array<CellInfo>) {
    this.$nextTick(() => {
      if (newValue.length > 0 && this.isNumberCell) {
        this.getMinMaxInfo(newValue[0])
      }
    })
  }

  mounted() {
    this.isNormal = true
    this.$nextTick(() => {
      initWave('ani-vr')
    })
  }

  onMouseEnter() {
    DataStore.clearHoverTimer()
  }

  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  private annotationSrc = '@/assets/icon-annotation.svg'
  private isAnnotationHover = false

  annotationHover() {
    this.isAnnotationHover = true
  }

  annotationOut() {
    this.isAnnotationHover = false
  }

  /**
   * 这里只需要关心Y方向是否溢出
   */
  isElementInViewport(element: HTMLElement) {
    const rect = element.getBoundingClientRect()
    return (
      rect.top >= 0 &&
      rect.bottom <=
        (window.innerHeight || document.documentElement.clientHeight)
    )
  }

  viewPortOffsetY: number = 0

  /**
   * 用于动态调整预览panel超出可视区的情况
   */
  onPreviewdatachange() {
    this.viewPortOffsetY = 0
    this.$nextTick(() => {
      const box = this.$refs.previewbox as HTMLElement
      if (box) {
        const inViewPort = this.isElementInViewport(box)
        if (!inViewPort) {
          this.viewPortOffsetY =
            (window.innerHeight || document.documentElement.clientHeight) -
            box.getBoundingClientRect().bottom -
            10
        }
      }
    })
  }

  closeVrPanel() {
    DataStore.toggleEnableVRPanelRecommend(false)
  }

  get selectColumns(): Array<string> {
    return DataStore.selectedColumns.reduce((rec: Array<string>, item: any) => {
      rec.push(item.name as string)
      return rec
    }, [])
  }

  getOhterCompareMode(compareMode?: string): string {
    let result: string = ''
    switch (compareMode) {
      case '>':
        result = '<='
        break

      case '>=':
        result = '<'
        break

      case '=':
        result = '<>'
        break

      case '<':
        result = '>='
        break

      case '<=':
        result = '>'
        break
      default:
        break
    }
    return result
  }

  /**
   * 操作信息
   */
  async doAction(actionInfo: any) {
    if (!actionInfo.action) {
      DataStore.setIsEditHistory(false)
      return
    }

    let request = DataStore.addHistory
    const data = {
      ...this.parseActionInfoData(actionInfo),
      id: this.currentHistory ? this.currentHistory.data.id : '', // 父记录id或者当前编辑的记录id
      table: this.tableName,
    }
    if (this.isEditHistory) {
      // 是编辑历史记录的状态
      request = DataStore.updateHistory
      const currentIndex = this.historyList.findIndex(
        (item) => item.data.id === this.currentHistory?.data.id
      )
      data.table = this.historyList[
        currentIndex === 0 ? currentIndex : currentIndex - 1
      ].data.table // 编辑状态下是基于上一条或当前记录的表名来进行筛选
    }
    if (+this.selectNode.type !== 5) {
      // 当前节点不是清洗算子节点，需要新加一个清洗算子节点然后进行筛选
      request = DataStore.addHistory
      await DataStore.selectNodeAddCleanNode()
      const { historyList } = await DataStore.getHistoryList()
      const currentHistory = historyList.slice(-1)[0]
      data.id = currentHistory.data.id
      data.table = currentHistory.data.table
      // const { output = [] } = newNode.data || {}
      // data.table = output[0] ? output[0].tableName : '' // 表名需要更换成新的表名
    }
    // DataStore.setTableData({
    //   head: [],
    //   data: [] // 清空
    // })
    // 清空填入的内容
    DataStore.resetVrSettingValues()
    const { result } = await request({
      data,
    })
    if (+this.selectNode.type === 5) {
      // 当前节点是清洗算子节点，需要先手动刷新节点，避免采样任务刷新状态的滞后性
      DataStore.setLastHistoryCompleteId(result.data.id)
      DataStore.getHistoryList() // 刷新历史记录
    }
    // await DataStore.refreshTaskQueryById(this.selectNode.id)
    DataStore.setConfirmEditTime(+new Date()) // 更新时间，触发后续节点的更新
    DataStore.setIsEditHistory(false)
    DataStore.clearTableSelection() // 清空清洗推荐的选中态
    const status = result.data.status.toLowerCase()
    if (status === 'success') {
      this.$message.success('操作成功')
    } else {
      this.$message.error('操作失败')
    }
  }

  getColumnInfo(name: string) {
    return DataStore.tableColumns.find((item) => item.name === name)
  }

  /**
   * 获取已选单元格去重后的值的集合
   */
  private getContainsValues(columnMode?: boolean): Array<string> {
    if (columnMode) {
      return [...new Set(DataStore.tableValueContains || [])]
    }
    const info = DataStore.tableSelectCells
    const values = info
      ? info.map((item) => {
          return [null, '', undefined].includes(item.cellValue)
            ? '#NULL'
            : item.cellValue
        })
      : []
    return [...new Set(values)]
  }

  /**
   * 获取contains模式下filter参数
   */
  private getContainsFilter(
    filterType: string = '=',
    columnMode?: boolean,
    isDelete?: boolean
  ): Array<any> {
    const cell: any = DataStore.tableSelectCells
      ? DataStore.tableSelectCells[0]
      : {}
    const values = this.getContainsValues(columnMode)
    const hasNull = values.includes('#NULL')
    const columnName = columnMode
      ? DataStore.tableSelectColumns[0].name
      : cell.columnName
    // 如果包含Null值则需要分开
    let filter = []
    if (!hasNull) {
      filter = [
        [
          {
            col: columnName,
            values,
            filterType,
          },
        ],
      ]
    } else if (values.length === 1) {
      filter = [
        [
          {
            col: columnName,
            values: ['#NULL'],
            filterType,
          },
        ],
      ]
    } else {
      filter = isDelete
        ? [
            [
              {
                col: columnName,
                values: values.filter((item) => item !== '#NULL'),
                filterType,
              },
            ],
            [
              {
                col: columnName,
                values: ['#NULL'],
                filterType,
              },
            ],
          ]
        : [
            [
              {
                col: columnName,
                values: values.filter((item) => item !== '#NULL'),
                filterType,
              },
              {
                col: columnName,
                values: ['#NULL'],
                filterType,
              },
            ],
          ]
    }
    return filter
  }

  parseActionInfoData(actionInfo: any) {
    let data: any = {}
    let fixTag = false
    switch (actionInfo.action) {
      // '行操作，筛选面板 > 选出存在缺失值的行 > 删除所选行'
      case OptionPreViewAction.rowFilterSelectNullRowsDelete:
        data = {
          transformType: 'SELECT_NULL',
          action: 'TRANSFORM_DELETE',
          actionType: actionInfo.action,
          description: '删除存在缺失值的行',
        }
        break
      // '行操作，筛选面板 > 选出存在缺失值的行 > 仅保留所选行',
      case OptionPreViewAction.rowFilterSelectNullRowsKeep:
        data = {
          transformType: 'SELECT_NULL',
          action: 'TRANSFORM_KEEP',
          actionType: actionInfo.action,
          description: '保留存在缺失值的行',
        }
        break
      // '行>删除当前行',
      case OptionPreViewAction.rowCommonDelete:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '<>',
                values: DataStore.tableSelectRowDatas.reduce(
                  (rec, item: any) => {
                    rec.push(item._record_id_)
                    return rec
                  },
                  []
                ),
                // values: DataStore.tableSelectRowNumbers
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: '删除行',
        }
        break
      case OptionPreViewAction.rowCommonKeep:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '=',
                values: DataStore.tableSelectRowDatas.reduce(
                  (rec, item: any) => {
                    rec.push(item._record_id_)
                    return rec
                  },
                  []
                ),
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: '仅保留所选行',
        }
        break
      // '列操作，常用面板 > 删除当前选中的列'
      case OptionPreViewAction.columnCommonDeleteSelectColumns:
        {
          const columns = this.selectColumns
          data = {
            action: 'REMOVE',
            actionType: actionInfo.action,
            removeCols: columns,
            description: `删除字段${columns.join(',')}`,
          }
        }
        break
      // 列操作，常用面板 > 删除未被选中的列
      case OptionPreViewAction.columnCommonDeleteOtherColumns:
        {
          const columns = this.selectColumns
          data = {
            action: 'RETAIN',
            actionType: actionInfo.action,
            description: `仅保留字段:${columns.join(',')}`,
            retainCols: columns,
          }
        }
        break
      case OptionPreViewAction.columnCommonDeleteRepeatCells:
        {
          const columns = this.selectColumns
          data = {
            action: 'TRANSFORM_REMOVE',
            actionType: actionInfo.action,
            description: `去除所选列中的重复行:${columns.join(',')}`,
            partitionCols: columns,
            sortCol: '_record_id_',
            sortVal: 'DESC',
          }
        }
        break
      // '列操作，筛选面板 > 选出该列存在缺失值的单元格 > 为所选单元格重新赋值'
      case OptionPreViewAction.columnFilterSelectNullCellsReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          setValue: DataStore.columnFilterSelectNullCellsResetValue,
          actionType: actionInfo.action,
          description: `对空单元格进行赋值为 ${DataStore.columnFilterSelectNullCellsResetValue}`,
          descriptionTpl: '对空单元格进行赋值为 {{value}}',
        }
        fixTag = true
        break
      // '列操作，筛选面板 > 选出该列存在缺失值的单元格 > 删除所选单元格存在的行'
      case OptionPreViewAction.columnFilterSelectNullCellsDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '<>',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: '删除存在缺失值的行',
        }
        fixTag = true
        break
      case OptionPreViewAction.columnFilterSelectNullCellsKeepRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: '仅保留单元格值为 Null 的行',
        }
        break
      case OptionPreViewAction.columnFilterCompareReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: DataStore.vrCompareInfo?.compareMode,
                values: [
                  isNull(DataStore.vrCompareInfo?.delimiter)
                    ? '#NULL'
                    : DataStore.vrCompareInfo?.delimiter,
                ],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          setValue:
            DataStore.columnFilterSelectNullCellsResetValue === ''
              ? null
              : DataStore.columnFilterSelectNullCellsResetValue,
          actionType: actionInfo.action,
          description: `将列中 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的值替换为 ${DataStore.columnFilterSelectNullCellsResetValue}`,
          descriptionTpl: `将列中 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的值替换为 {{value}}`,
        }
        break

      case OptionPreViewAction.columnFilterCompareDeleteRows:
        {
          const vrCompareInfo: any = DataStore.vrCompareInfo
            ? DataStore.vrCompareInfo
            : {}
          data = {
            filter: [
              [
                {
                  col: DataStore.tableSelectColumns[0].name,
                  filterType: this.getOhterCompareMode(
                    DataStore.vrCompareInfo?.compareMode
                  ),
                  values: [
                    [null, '', undefined].includes(vrCompareInfo.delimiter)
                      ? '#NULL'
                      : vrCompareInfo.delimiter,
                  ],
                },
                {
                  col: DataStore.tableSelectColumns[0].name,
                  filterType: '=',
                  values: ['#NULL'],
                },
              ],
            ],
            action: 'FILTER',
            col: DataStore.tableSelectColumns[0].name,
            actionType: actionInfo.action,
            description: `删除值范围在 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的单元格所在的行`,
          }
        }

        break
      case OptionPreViewAction.columnFilterCompareKeepRows:
        {
          const vrCompareInfo: any = DataStore.vrCompareInfo
            ? DataStore.vrCompareInfo
            : {}
          data = {
            filter: [
              [
                {
                  col: DataStore.tableSelectColumns[0].name,
                  filterType: DataStore.vrCompareInfo?.compareMode,
                  values: [
                    [null, '', undefined].includes(vrCompareInfo.delimiter)
                      ? '#NULL'
                      : vrCompareInfo.delimiter,
                  ],
                },
              ],
            ],
            action: 'FILTER',
            col: DataStore.tableSelectColumns[0].name,
            actionType: actionInfo.action,
            description: `仅保留单元格值为 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的行`,
          }
        }
        break
      case OptionPreViewAction.columnFilterContainsReset:
        data = {
          filter: this.getContainsFilter('=', true, false),
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `值为 ${this.getContainsValues(true).join(
            ','
          )} 的单元格进行赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `值为 ${this.getContainsValues(true).join(
            ','
          )} 的单元格进行赋值为 {{value}}`,
        }
        break
      case OptionPreViewAction.columnFilterContainsDeleteRows:
        data = {
          filter: this.getContainsFilter('<>', true, true),
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: `删除列中值为 ${this.getContainsValues(true).join(
            ','
          )} 的行`,
        }
        break
      case OptionPreViewAction.columnFilterContainsKeepRows:
        data = {
          filter: this.getContainsFilter('=', true, false),
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: `仅保留列中值为 ${this.getContainsValues(true).join(
            ','
          )} 的行`,
        }
        break
      case OptionPreViewAction.columnFilterRangeReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '[a,b]',
                values: [
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : '',
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : '',
                ],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          } 的单元格赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          } 的单元格赋值为 {{value}}`,
        }
        break

      case OptionPreViewAction.columnFilterRangeDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '<',
                values: [
                  Math.min(
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : 0,
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : 0
                  ),
                ],
              },
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '>',
                values: [
                  Math.max(
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : 0,
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : 0
                  ),
                ],
              },
              // 需要把null的也保留下来
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: `删除范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          }  的单元格所在的行`,
        }
        break
      case OptionPreViewAction.columnFilterRangeKeepRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectColumns[0].name,
                filterType: '[a,b]',
                values: [
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : '',
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : '',
                ],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectColumns[0].name,
          actionType: actionInfo.action,
          description: `仅保留范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          }  的单元格所在的行`,
        }
        break
      // 列操作，筛选面板 > 列合并
      case OptionPreViewAction.columnMergeColumns:
        {
          const mergeCols = DataStore.tableSelectColumns.map(
            (item) => item.name
          )
          const { newColumnName, joinString } = actionInfo.data
          data = {
            newCol: newColumnName,
            col: newColumnName,
            columnName: newColumnName,
            separator: joinString,
            action: 'MERGE',
            actionType: actionInfo.action,
            description: `合并名：${newColumnName}，分隔符${joinString}，来自：${mergeCols.join(
              '、'
            )}`,
            descriptionTpl: `合并名：{{newColumnName}}，分隔符{{joinString}}，来自：${mergeCols.join(
              '、'
            )}`,
            mergeCols,
          }
        }
        break
      // 单元格 > 选出该列存在缺失值的单元格 > 为所选单元格重新赋值
      case OptionPreViewAction.cellFilterSelectNullCellsReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          setValue: actionInfo.data.replaceValue,
          actionType: actionInfo.action,
          description: `对空单元格进行赋值为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: '对空单元格进行赋值为 {{value}}',
        }
        fixTag = true
        break
      // 单元格 > 选出该列存在缺失值的单元格 > 删除所选单元格存在的行
      case OptionPreViewAction.cellFilterSelectNullCellsDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '<>',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: `删除${DataStore.tableSelectCells[0].columnName}下存在缺失值的行`,
        }
        fixTag = true
        break
      case OptionPreViewAction.cellFilterSelectNullCellsKeepRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: `仅保留${DataStore.tableSelectCells[0].columnName}下存在缺失值的行`,
        }
        fixTag = true
        break
      case OptionPreViewAction.cellFilterSelectContainsCellReset:
        data = {
          filter: this.getContainsFilter('=', false, false),
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `值为 ${this.getContainsValues().join(
            ','
          )} 的单元格进行赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `值为 ${this.getContainsValues().join(
            ','
          )} 的单元格进行赋值为 {{value}}`,
        }
        break
      case OptionPreViewAction.cellFilterSelectContainsCellDeleteRows:
        data = {
          filter: this.getContainsFilter('<>', false, true),
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `删除列中值为 ${this.getContainsValues().join(
            ','
          )} 的行`,
        }
        break

      case OptionPreViewAction.cellFilterSelectContainsCellKeepRows:
        data = {
          filter: this.getContainsFilter('=', false, false),
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `仅保留单元格值为 ${this.getContainsValues().join(
            ','
          )} 的行`,
        }
        break
      // '单元格 > 重新赋值 > 重新赋值为null'
      case OptionPreViewAction.cellResetSelectCellReset:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '=',
                values: DataStore.tableSelectCells.reduce((rec, item) => {
                  rec.push(item._record_id_)
                  return rec
                }, [] as Array<string>),
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          setValue: actionInfo.data.replaceValue,
          actionType: actionInfo.action,
          description: `对已选单元格进行赋值为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: '对已选单元格进行赋值为 {{value}}',
        }
        break
      // '单元格 > 常规 > 删除所选行'
      case OptionPreViewAction.cellCommonDeleteSelectRows:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '<>',
                values: DataStore.tableSelectCells.reduce(
                  (rec: Array<string>, item: any) => {
                    rec.push(item._record_id_ as string)
                    return rec
                  },
                  []
                ),
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: '删除单元格所在的行',
        }
        break
      // '单元格 > 常规 > 仅保留所选单元格所在的行'
      case OptionPreViewAction.cellCommonKeepSelectRows:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '=',
                values: DataStore.tableSelectCells.reduce(
                  (rec: Array<string>, item: any) => {
                    rec.push(item._record_id_ as string)
                    return rec
                  },
                  []
                ),
              },
            ],
          ],
          action: 'FILTER',
          actionType: actionInfo.action,
          description: '仅保留单元格所在的行',
        }
        break
      // '单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 替换当前所选单元格中刷选内容'
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordReplaceKeyword:
        data = {
          brushValue: actionInfo.data.brushValue,
          replaceValue: actionInfo.data.replaceKeyword,
          action: 'TRANSFORM_REPLACE',
          transformType: 'BRUSH_CONTENT',
          col: DataStore.tableSelectionInfo?.columnName,
          actionType: actionInfo.action,
          description: `把单元格中的 ${actionInfo.data.brushValue} 的替换为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `把单元格中的 ${actionInfo.data.brushValue} 的替换为 {{value}}`,
        }
        break
      // '单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 为所选单元格重新赋值'
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordReplaceContent:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: '~',
                values: [actionInfo.data.brushValue],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          setValue: actionInfo.data.replaceValue,
          actionType: actionInfo.action,
          description: `把包含 ${actionInfo.data.brushValue} 单元格进行赋值为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: `把包含 ${actionInfo.data.brushValue} 单元格进行赋值为 {{value}}`,
        }
        break
      // '单元格文字选中 > 筛选 > 选出包含关键字的单元格 > 删除单元格所在的行'
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: '!~',
                values: [actionInfo.data.brushValue],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          actionType: actionInfo.action,
          description: `删除包含 ${actionInfo.data.brushValue} 所在的行`,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordKeepRows:
        data = {
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: '~',
                values: [actionInfo.data.brushValue],
                wildcardType: 'like',
              },
            ],
          ],
          description: `只保留：包含 ${actionInfo.data.brushValue} 的值`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordExtractColumn:
        data = {
          action: 'TRANSFORM_EXTRACT',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'BRUSH_CONTENT',
          brushValue: actionInfo.data.brushValue,
          newCol: actionInfo.data.extractColumn,
          actionType: actionInfo.action,
          description: `将刷选内容 ${actionInfo.data.brushValue} 抽取新列 ${actionInfo.data.extractColumn}`,
          descriptionTpl: `将刷选内容 ${actionInfo.data.brushValue} 抽取新列 {{value}}`,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsByKeywordSplitColumns:
        {
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            action: 'SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            separator: splitinfo.separator,
            splitType: splitinfo.splitType,
            splitNum: splitinfo.splitNum,
            description: splitinfo.desc,
            descriptionTpl: `以 ${splitinfo.separator}拆分，取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
            newCol: splitinfo.newCol,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithKeywordReplaceKeyword:
        data = {
          action: 'TRANSFORM_REPLACE',
          actionType: actionInfo.action,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'STARTS_WITH',
          description: `将以 ${actionInfo.data.brushValue} 开头的单元格中的 ${actionInfo.data.brushValue} 替换为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 开头的单元格中的 ${actionInfo.data.brushValue} 替换为 {{value}}`,
          startsValue: actionInfo.data.brushValue,
          replaceValue: actionInfo.data.replaceKeyword,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithKeywordReplaceContent:
        data = {
          action: 'TRANSFORM_SET',
          actionType: actionInfo.action,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'STARTS_WITH',
          description: `将以 ${actionInfo.data.brushValue} 开头的单元格中的重置为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 开头的单元格中的重置为 {{value}}`,
          startsValue: actionInfo.data.brushValue,
          setValue: actionInfo.data.replaceValue,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithKeywordExtractColumn:
        data = {
          action: 'TRANSFORM_EXTRACT',
          actionType: actionInfo.action,
          description: `将以 ${actionInfo.data.brushValue} 开头的单元格中的抽取新列 ${actionInfo.data.extractColumn}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 开头的单元格中的抽取新列 {{value}}`,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'STARTS_WITH',
          startsValue: actionInfo.data.brushValue,
          newCol: actionInfo.data.extractColumn,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithKeywordDeleteRows:
        data = {
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: 'not starts with',
                values: [actionInfo.data.brushValue],
                wildcardType: 'start',
              },
            ],
          ],
          description: `排除：开头为 ${actionInfo.data.brushValue} 的值`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithKeywordKeepRows:
        data = {
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: 'starts with',
                values: [actionInfo.data.brushValue],
                wildcardType: 'start',
              },
            ],
          ],
          description: `只保留：开头为 ${actionInfo.data.brushValue} 的值`,
          actionType: actionInfo.action,
        }
        break
      // '元格文字选中 > 替换 > 替换刷选内容' (这里需要考虑多刷的情况)
      case OptionPreViewAction.selectionReplaceSelectionKeyword:
        data = {
          action: 'TRANSFORM_REPLACE',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'MULTIPLE_CELL',
          params: !DataStore.tableSelectionInfo?.isMutiple
            ? [
                {
                  _record_id_: DataStore.tableSelectionInfo?._record_id_,
                  brushValue: DataStore.tableSelectionInfo?.selection,
                },
              ]
            : Object.values(
                DataStore.tableSelectionInfo.mutipleSelectionInfo || {}
              ).reduce((rec, selection) => {
                rec.push({
                  _record_id_: selection._record_id_,
                  brushValue: selection.selection,
                })
                return rec
              }, [] as Array<any>) || [],
          replaceValue: actionInfo.data.replaceValue,
          actionType: actionInfo.action,
          description: `单元格刷选内容替换为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: '单元格刷选内容替换为 {{value}}',
        }
        break
      // '元格文字选中 > 重新赋值 > 刷选单元格重新赋值' (包含多刷情况)
      case OptionPreViewAction.selectionCellsReset:
        data = {
          filter: [
            [
              {
                col: '_record_id_',
                filterType: '=',
                values: DataStore.tableSelectionInfo?._record_id_Array
                  ? DataStore.tableSelectionInfo?._record_id_Array
                  : [DataStore.tableSelectionInfo?._record_id_],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          setValue: actionInfo.data.replaceValue,
          actionType: actionInfo.action,
          description: `刷选内容所在单元格赋值为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: '刷选内容所在单元格赋值为 {{value}}',
        }
        break
      case OptionPreViewAction.cellFilterSelectCompareCellReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: DataStore.vrCompareInfo?.compareMode,
                values: [DataStore.vrCompareInfo?.delimiter],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `范围在 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的单元格赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `范围在 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的单元格赋值为 {{value}}`,
        }
        break
      case OptionPreViewAction.cellFilterSelectCompareCellDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: this.getOhterCompareMode(
                  DataStore.vrCompareInfo?.compareMode
                ),
                values: [DataStore.vrCompareInfo?.delimiter],
              },
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `删除值范围在 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的单元格所在的行`,
        }
        break
      case OptionPreViewAction.cellFilterSelectCompareCellKeepRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: DataStore.vrCompareInfo?.compareMode,
                values: [DataStore.vrCompareInfo?.delimiter],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `仅保留值范围在 ${DataStore.vrCompareInfo?.compareMode} ${DataStore.vrCompareInfo?.delimiter} 的单元格所在的行`,
        }
        break
      case OptionPreViewAction.cellFilterSelectRangeCellReset:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '[a,b]',
                values: [
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : '',
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : '',
                ],
              },
            ],
          ],
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          } 的单元格赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          } 的单元格赋值为 {{value}}`,
        }
        break
      case OptionPreViewAction.cellFilterSelectRangeCellDeleteRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '<',
                values: [
                  Math.min(
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : 0,
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : 0
                  ),
                ],
              },
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '>',
                values: [
                  Math.max(
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : 0,
                    DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : 0
                  ),
                ],
              },
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '=',
                values: ['#NULL'],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `删除范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          }  的单元格所在的行`,
        }
        break

      case OptionPreViewAction.cellFilterSelectRangeCellKeepRows:
        data = {
          filter: [
            [
              {
                col: DataStore.tableSelectCells[0].columnName,
                filterType: '[a,b]',
                values: [
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : '',
                  DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : '',
                ],
              },
            ],
          ],
          action: 'FILTER',
          col: DataStore.tableSelectCells[0].columnName,
          actionType: actionInfo.action,
          description: `仅保留范围在 ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[0] : ''
          } - ${
            DataStore.vrRangeInfo ? DataStore.vrRangeInfo[1] : ''
          } 的单元格所在的行`,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithKeywordReplaceKeyword:
        data = {
          action: 'TRANSFORM_REPLACE',
          actionType: actionInfo.action,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'ENDS_WITH',
          description: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的 ${actionInfo.data.brushValue} 替换为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的 ${actionInfo.data.brushValue} 替换为 {{value}}`,
          endsValue: actionInfo.data.brushValue,
          replaceValue: actionInfo.data.replaceKeyword,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithKeywordReplaceContent:
        data = {
          action: 'TRANSFORM_SET',
          actionType: actionInfo.action,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'ENDS_WITH',
          description: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的重置为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的重置为 {{value}}`,
          endsValue: actionInfo.data.brushValue,
          setValue: actionInfo.data.replaceValue,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithKeywordExtractColumn:
        data = {
          action: 'TRANSFORM_EXTRACT',
          actionType: actionInfo.action,
          description: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的抽取新列 ${actionInfo.data.extractColumn}`,
          descriptionTpl: `将以 ${actionInfo.data.brushValue} 结尾的单元格中的抽取新列 {{value}}`,
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'ENDS_WITH',
          endsValue: actionInfo.data.brushValue,
          newCol: actionInfo.data.extractColumn,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithKeywordDeleteRows:
        data = {
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: 'not ends with',
                values: [actionInfo.data.brushValue],
              },
            ],
          ],
          description: `排除结尾为 ${actionInfo.data.brushValue} 的值`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithKeywordKeepRows:
        data = {
          action: 'FILTER',
          col: DataStore.tableSelectionInfo?.columnName,
          filter: [
            [
              {
                col: DataStore.tableSelectionInfo?.columnName,
                filterType: 'ends with',
                values: [actionInfo.data.brushValue],
              },
            ],
          ],
          description: `仅保留结尾为 ${actionInfo.data.brushValue} 的值`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionReplaceKeyword:
        data = {
          action: 'TRANSFORM_REPLACE',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'POSITION',
          cursorStart: DataStore.tableSelectionInfo?.startIndex,
          cursorEnd: DataStore.tableSelectionInfo?.endIndex,
          replaceValue: actionInfo.data.replaceKeyword,
          description: `替换文本位置 ${DataStore.tableSelectionInfo?.startIndex}  ${DataStore.tableSelectionInfo?.endIndex} 的内容为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `替换文本位置 ${DataStore.tableSelectionInfo?.startIndex}  ${DataStore.tableSelectionInfo?.endIndex} 的内容为 {{value}}`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionReplaceContent:
        data = {
          action: 'TRANSFORM_SET',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'POSITION',
          cursorStart: DataStore.tableSelectionInfo?.startIndex,
          cursorEnd: DataStore.tableSelectionInfo?.endIndex,
          setValue: actionInfo.data.replaceKeyword,
          description: `替换文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的单元格的内容为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `替换文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的单元格的内容为 {{value}}`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionExtractColumn:
        data = {
          action: 'TRANSFORM_EXTRACT',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'POSITION',
          cursorStart: DataStore.tableSelectionInfo?.startIndex,
          cursorEnd: DataStore.tableSelectionInfo?.endIndex,
          newCol: actionInfo.data.extractColumn,
          description: `抽取该列文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的内容为新列 ${actionInfo.data.extractColumn}`,
          descriptionTpl: `抽取该列文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的内容为新列 {{value}}`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionSplitColumns:
        {
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            splitType: splitinfo.splitType,
            splitNum: splitinfo.splitNum,
            description: `以位置${
              DataStore.tableSelectionInfo?.startIndex
            } 到 ${
              DataStore.tableSelectionInfo?.endIndex
            }之间的内容拆分，取前 ${
              splitinfo.splitNum
            }列,列名 ${splitinfo.newCol.join(',')}`,
            descriptionTpl: `以位置${DataStore.tableSelectionInfo?.startIndex} 到 ${DataStore.tableSelectionInfo?.endIndex}之间的内容拆分，取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
            action: 'TRANSFORM_SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'POSITION',
            cursorStart: DataStore.tableSelectionInfo?.startIndex,
            cursorEnd: DataStore.tableSelectionInfo?.endIndex,
            newCol: splitinfo.newCol,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionDeleteRows:
        data = {
          action: 'TRANSFORM_DELETE',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'POSITION',
          cursorStart: DataStore.tableSelectionInfo?.startIndex,
          cursorEnd: DataStore.tableSelectionInfo?.endIndex,
          description: `删除该列文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的有内容的行`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosSelectionKeepRows:
        data = {
          action: 'TRANSFORM_KEEP',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'POSITION',
          cursorStart: DataStore.tableSelectionInfo?.startIndex,
          cursorEnd: DataStore.tableSelectionInfo?.endIndex,
          description: `仅保留该列文本位置 ${DataStore.tableSelectionInfo?.startIndex} - ${DataStore.tableSelectionInfo?.endIndex} 的有内容的行`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordReplaceKeyword:
        data = {
          action: 'TRANSFORM_REPLACE',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'WORD_POSITION',
          wordIndex: DataStore.tableSelectionInfo?.wordPos,
          replaceValue: actionInfo.data.replaceKeyword,
          description: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格替换刷选内容为 ${actionInfo.data.replaceKeyword}`,
          descriptionTpl: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格替换刷选内容为 {{value}}`,
          actionType: actionInfo.action,
        }
        break

      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordReplaceContent:
        data = {
          action: 'TRANSFORM_SET',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'WORD_POSITION',
          wordIndex: DataStore.tableSelectionInfo?.wordPos,
          setValue: actionInfo.data.replaceValue,
          description: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格内容设为 ${actionInfo.data.replaceValue}`,
          descriptionTpl: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格内容设为 {{value}}`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordExtractColumn:
        data = {
          action: 'TRANSFORM_EXTRACT',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'WORD_POSITION',
          wordIndex: DataStore.tableSelectionInfo?.wordPos,
          newCol: actionInfo.data.extractColumn,
          description: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格抽取刷选内容为新列 ${actionInfo.data.extractColumn}`,
          descriptionTpl: `将该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格抽取刷选内容为新列 {{value}}`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordSplitColumns:
        {
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            splitType: splitinfo.splitType,
            splitNum: splitinfo.splitNum,
            description: `以第 ${
              DataStore.tableSelectionInfo?.wordPos
            }个单词拆分，取前 ${
              splitinfo.splitNum
            }列,列名 ${splitinfo.newCol.join(',')}`,
            descriptionTpl: `以第 ${DataStore.tableSelectionInfo?.wordPos}个单词拆分，取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
            action: 'TRANSFORM_SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'WORD_POSITION',
            wordIndex: DataStore.tableSelectionInfo?.wordPos,
            newCol: splitinfo.newCol,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordDeleteRows:
        data = {
          action: 'TRANSFORM_DELETE',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'WORD_POSITION',
          wordIndex: DataStore.tableSelectionInfo?.wordPos,
          description: `删除该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格所在的行`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsSamePosWordKeepRows:
        data = {
          action: 'TRANSFORM_KEEP',
          col: DataStore.tableSelectionInfo?.columnName,
          transformType: 'WORD_POSITION',
          wordIndex: DataStore.tableSelectionInfo?.wordPos,
          description: `仅保留该列单词 ${
            DataStore.tableSelectionInfo?.selection
          } 位置在 ${
            DataStore.tableSelectionInfo?.wordPos
              ? DataStore.tableSelectionInfo?.wordPos
              : 0
          } 的单元格所在的行`,
          actionType: actionInfo.action,
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordReplaceKeyword:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          if (tableSelectionInfo) {
            data = {
              action: 'TRANSFORM_REPLACE',
              col: DataStore.tableSelectionInfo?.columnName,
              transformType: 'AFTER_BEFORE',
              before: null,
              after: tableSelectionInfo.startWithWord,
              replaceValue: actionInfo.data.replaceKeyword,
              description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词替换为 ${actionInfo.data.replaceKeyword}`,
              descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词替换为 {{value}}`,
              actionType: actionInfo.action,
            }
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordReplaceContent:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_SET',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: null,
            after: tableSelectionInfo.startWithWord,
            setValue: actionInfo.data.replaceValue,
            description: `将该列内容 ${tableSelectionInfo.startWithWord} 后的有单词的单元格内容替换为 ${actionInfo.data.replaceValue}`,
            descriptionTpl: `将该列内容 ${tableSelectionInfo.startWithWord} 后的有单词的单元格内容替换为 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordExtractColumn:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_EXTRACT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: null,
            after: tableSelectionInfo.startWithWord,
            newCol: actionInfo.data.extractColumn,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词抽取新列 ${actionInfo.data.extractColumn}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词抽取新列 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordSplitColumns:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            action: 'TRANSFORM_SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: null,
            after: tableSelectionInfo.startWithWord,
            splitNum: splitinfo.splitNum,
            newCol: splitinfo.newCol,
            description: `以该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词拆分为多列`,
            descriptionTpl: `以该列单元格内容 ${tableSelectionInfo.startWithWord} 后的单词拆分，取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordDeleteRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_DELETE',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: null,
            after: tableSelectionInfo.startWithWord,
            actionType: actionInfo.action,
            description: `删除该列单元格中单词 ${tableSelectionInfo.startWithWord} 后的有单词的单元格`,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithSameWordKeepRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_KEEP',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: null,
            after: tableSelectionInfo.startWithWord,
            actionType: actionInfo.action,
            description: `仅保留该列单元格中单词 ${tableSelectionInfo.startWithWord} 后的有单词的单元格`,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordReplaceKeyword:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_REPLACE',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            replaceValue: actionInfo.data.replaceKeyword,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 前的单词替换为 ${actionInfo.data.replaceKeyword}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 前的单词替换为 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordReplaceContent:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_SET',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            setValue: actionInfo.data.replaceValue,
            description: `将该列内容 ${tableSelectionInfo.startWithWord} 前的有单词的单元格内容替换为 ${actionInfo.data.replaceValue}`,
            descriptionTpl: `将该列内容 ${tableSelectionInfo.startWithWord} 前的有单词的单元格内容替换为 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordExtractColumn:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_EXTRACT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            newCol: actionInfo.data.extractColumn,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 前的单词抽取为一列, 列名 ${actionInfo.data.extractColumn}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 前的单词抽取为一列, 列名 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordSplitColumns:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            action: 'TRANSFORM_SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            splitNum: splitinfo.splitNum,
            newCol: splitinfo.newCol,
            description: `以该列单元格内容 ${
              tableSelectionInfo.endWithword
            } 前的单词拆分为多列, 取前 ${
              splitinfo.splitNum
            }列,列名 ${splitinfo.newCol.join(',')}`,
            descriptionTpl: `以该列单元格内容 ${tableSelectionInfo.endWithword} 拆分多列, 取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordDeleteRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_DELETE',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            actionType: actionInfo.action,
            description: `删除该列内容 ${tableSelectionInfo.startWithWord} 前的有单词的单元格所在的行`,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsEndWithSameWordKeepRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_KEEP',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: null,
            actionType: actionInfo.action,
            description: `仅保留该列内容 ${tableSelectionInfo.endWithword} 前的有单词的单元格所在的行`,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordReplaceKeyword:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_REPLACE',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            replaceValue: actionInfo.data.replaceKeyword,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间的单词替换为 ${actionInfo.data.replaceKeyword}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间的单词替换为 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordReplaceContent:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_SET',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            setValue: actionInfo.data.replaceValue,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间有单词的单元格内容替换为 ${actionInfo.data.replaceValue}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间有单词的单元格内容替换为 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordExtractColumn:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_EXTRACT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            newCol: actionInfo.data.extractColumn,
            description: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间的单词抽取为一列, 列名 ${actionInfo.data.extractColumn}`,
            descriptionTpl: `将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间的单词抽取为一列, 列名 {{value}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordSplitColumns:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          const splitinfo = actionInfo.data.splitInfo as SplitInfo
          data = {
            action: 'TRANSFORM_SPLIT',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            splitNum: splitinfo.splitNum,
            newCol: splitinfo.newCol,
            description: `将该列单元格内容以 ${
              tableSelectionInfo.startWithWord
            } 和 ${tableSelectionInfo.endWithword} 之间的单词拆分为多列, 取前${
              splitinfo.splitNum
            }列,列名${splitinfo.newCol.join(',')}`,
            descriptionTpl: `将该列单元格内容以 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间的单词拆分为多列, 取前 {{splitNum}}列,列名 {{columnNames}}`,
            actionType: actionInfo.action,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordDeleteRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_DELETE',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            actionType: actionInfo.action,
            description: `删除将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间有单词的单元格所在的行`,
          }
        }
        break
      case OptionPreViewAction.selectionFilterSelectCellsStartWithAndEndWithSameWordKeepRows:
        {
          const tableSelectionInfo = DataStore.tableSelectionInfo as SelectionInfo
          data = {
            action: 'TRANSFORM_KEEP',
            col: DataStore.tableSelectionInfo?.columnName,
            transformType: 'AFTER_BEFORE',
            before: tableSelectionInfo.endWithword,
            after: tableSelectionInfo.startWithWord,
            actionType: actionInfo.action,
            description: `仅保留将该列单元格内容 ${tableSelectionInfo.startWithWord} 和 ${tableSelectionInfo.endWithword} 之间有单词的单元格所在的行`,
          }
        }
        break

      case OptionPreViewAction.mapDataBarSelectReset:
        data = {
          filter: DataStore.columnFilters,
          action: 'TRANSFORM_SET',
          transformType: 'FILTER',
          col: DataStore.columnFilters[0][0]?.col,
          setValue: actionInfo.replaceValue,
          actionType: actionInfo.action,
          description: `值为 ${DataStore.columnFilters[0][0]?.values[0]} 的单元格进行赋值为 ${actionInfo.replaceValue}`,
          descriptionTpl: `值为 ${DataStore.columnFilters[0][0]?.values[0]} 的单元格进行赋值为 {{value}}`,
        }
        break

      case OptionPreViewAction.newColumnBaseOnFormula:
        data = {
          ...actionInfo,
        }
        break

      // 2021.7.23 对解析数组解析
      // 对象解析
      case OptionPreViewAction.selectionJsonParse:
        data = {
          action: 'JSON_PARSE',
          col: actionInfo.col,
          key: actionInfo.data.key,
          description:
            actionInfo.data.key.length === 1
              ? `对象解析出key:${actionInfo.data.key[0]}`
              : `对象解析共${actionInfo.data.key.length}个值`,
          actionType: actionInfo.action,
        }
        break
      // 数组解析
      case OptionPreViewAction.selectionArrayParse:
        data = {
          action: 'ARRAY_PARSE',
          col: actionInfo.col,
          newCol: actionInfo.data.newCol || null, // 整列推荐数组解析， 允许指定新列明
          index: actionInfo.data.index,
          description: `数组解析出${actionInfo.data.index.length}个索引`,
          actionType: actionInfo.action,
        }
        break
      // 嵌合成对象
      case OptionPreViewAction.columnsChimeraIntoJson:
        {
          const mergeCols = DataStore.tableSelectColumns.map(
            (item) => item.name
          )
          const { newColumnName } = actionInfo.data
          data = {
            action: 'JSON_MERGE',
            cols: mergeCols,
            columnName: newColumnName,
            description: `嵌合成对象，嵌合名: ${newColumnName}， 来自: ${mergeCols.join(
              '、'
            )}`,
            actionType: actionInfo.action,
          }
        }
        break
      // 嵌合成数组
      case OptionPreViewAction.columnsChimeraIntoArray:
        {
          const mergeCols = DataStore.tableSelectColumns.map(
            (item) => item.name
          )
          const { newColumnName } = actionInfo.data
          data = {
            action: 'ARRAY_MERGE',
            cols: mergeCols,
            columnName: newColumnName,
            description: `嵌合成数组，嵌合名: ${newColumnName}， 来自: ${mergeCols.join(
              '、'
            )}`,
            actionType: actionInfo.action,
          }
        }
        break

      // todo 后续待开发...

      default:
        break
    }

    if (fixTag === true) {
      const columnName = data && data.filter ? data.filter[0][0].col : ''
      if (columnName) {
        // todo 后续需要根据字段类型查询 包含空值的数据
        const column = this.getColumnInfo(columnName)
        if (
          column &&
          column.desc &&
          ['varchar', 'text'].includes(column.desc)
        ) {
          ;(data.filter[0] as Array<any>).push({
            col: columnName,
            values: [''],
            filterType: '=',
          })
        }
      }
    }
    return data
  }
}
</script>
<style lang="less" scoped>
/deep/ .op-group + .op-group {
  margin-top: 10px;
}

/deep/ .op-group {
  margin: 2px;
  width: 99%;

  /deep/ .op-title {
    color: #373b52;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

.comp-visual-recommendation {
  background: #fff;
  box-shadow: -5px 1px 10px 0 rgba(88, 98, 230, 0.06);
  display: block;
  min-width: 460px;
  //pointer-events: none;
  position: relative;
  transition: width ease-in-out 0.3s;
  width: 480px;

  &.with-tab {
    height: calc(100% - 38px);
    margin-top: 38px;
  }

  &.no-tab {
    height: 100%;
  }

  &.hide {
    display: none;
    overflow: hidden;
  }

  &::before {
    border-left: 1px solid rgba(88, 98, 230, 0.05);
    content: ' ';
    height: 100%;
    left: 0;
    position: absolute;
    width: 1px;
  }

  .vr-content {
    background: transparent;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 10px 0 rgba(88, 98, 230, 0.05);
    height: calc(100% - 62px);
    left: 0;
    // top: 100px;
    overflow-y: scroll;
    padding: 0 16px 16px;
    pointer-events: all;
    position: absolute;
    width: 100%;
    z-index: 1;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }

    .vr-content-tabs {
      height: 100%;
      padding-top: 25px;
      width: 428px;

      /deep/ .ant-tabs-tab {
        color: #5d637e;
        font-size: 14px;
        font-weight: 400;
        height: 46px;
        letter-spacing: 1px;
        margin: 0;
        margin-right: 29.5px;
        text-align: center;
        width: 123px;
      }

      /deep/ .ant-tabs-tab:last-child {
        margin-right: 0;
      }

      /deep/ .ant-tabs-tab-active {
        color: #6973ff;
        font-weight: 500;
      }

      /deep/ .ant-tabs-tab:hover {
        color: #6973ff;
      }

      /deep/ .ant-tabs-ink-bar-animated {
        background: #6973ff;
      }

      /deep/ .ant-tabs-content {
        height: calc(100% - 61px);
      }
    }
  }

  // 旧版vr-header
  // .vr-header {
  //   border-radius: 8px;
  //   border-radius: 0;
  //   font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  //   height: 160px;
  //   width: 100%;

  //   .text-box {
  //     height: 160px;
  //     left: 0;
  //     padding: 18px 20px;
  //     position: absolute;
  //     top: 0;
  //     width: 100%;
  //     z-index: 2;
  //   }

  //   .canvas {

  //     background-image: linear-gradient(135deg, #8190eb 0%, #5860e6 100%);
  //     height: 160px;
  //     left: 0;
  //     position: absolute;
  //     top: 0;
  //     width: 100%;
  //     z-index: 1;
  //   }

  //   .hi {
  //     color: #fff;
  //     font-size: 18px;
  //     height: 24px;
  //     letter-spacing: 1.12px;
  //     line-height: 24px;
  //     margin: 0;
  //     opacity: 0;
  //     padding: 0;

  //     transform: translateY(150%);
  //     transition: 0.4s ease-in;
  //   }

  //   .desc {
  //     color: #fff;
  //     font-size: 16px;
  //     letter-spacing: 1px;
  //     line-height: 22px;
  //     margin-top: 8px;
  //     opacity: 0;
  //     transform: translateY(150%);
  //     transition: all 0.6s ease-in;
  //   }

  //   &.normal {
  //     .hi,
  //     .desc {
  //       opacity: 1;
  //       transform: translateY(0);
  //     }
  //   }

  //   .btn-close {
  //     color: #fff;
  //     cursor: pointer;
  //     display: block;
  //     float: right;
  //     font-size: 16px;
  //     padding: 4px;
  //     pointer-events: all;
  //   }
  // }

  // 新版vr-header
  .vr-header {
    border-bottom: 1px solid #e8e8e8;
    height: 62px;
    position: relative;
    width: 100%;

    .vr-header-text {
      color: #373b52;
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      height: 22px;
      left: 20px;
      letter-spacing: 1px;
      position: absolute;
      top: 19px;
      z-index: 2;
    }

    .canvas {
      background-image: linear-gradient(135deg, #8190eb 0%, #5860e6 100%);
      height: 61px !important;
      left: 0;
      position: absolute;
      top: 0;
      width: 460px !important;
      z-index: 1;
    }

    .close-btn {
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      height: 24px;
      position: absolute;
      right: 10px;
      top: 14px;
      width: 24px;
      z-index: 2;
    }
  }

  .preview-box {
    background: #fff;
    box-shadow: 0 1px 10px 0 rgba(88, 98, 230, 0.15);
    height: auto;
    min-height: 40px;
    min-width: 100px;
    pointer-events: all;
    position: fixed;
    right: 420px;
    top: 0;
    transition: top ease-in-out 0.2s;
    z-index: 10000;

    .after {
      background: transparent;
      display: block;
      height: 20px;
      position: absolute;
      right: -11px;
      top: 28px;
      transform: translateY(-50%);
      width: 12px;
      z-index: 2;
    }
  }
}

.no-vr {
  align-items: center;
  background: #fff;
  background-color: #fff;
  border-radius: 4px;
  // box-shadow: 0 0 4px 0 rgba(88, 98, 230, 0.2);
  display: flex;
  height: 100%;
  justify-content: center;
  padding-bottom: 8px;
  text-align: center;
  width: 100%;

  .desc {
    color: rgba(92, 98, 144, 0.8);
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
  }
}
</style>
<style lang="less">
.visual-recommendation-annotation-tooltip {
  text-align: center;

  /deep/ .ant-tooltip-inner {
    text-align: center;
    width: 316px;
  }
}
</style>
